<template>
  <panel title="订单统计表">
    <el-form label-width="80px">
      <el-form-item label="时间范围">
        <el-date-picker v-model="date" type="datetimerange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button @click="search" type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="charts">
      <line-chart :xData="orderTime" :yData="orderPrice"></line-chart>
    </div>
  </panel>
</template>

<script>
import LineChart from '@/components/line/LineChart.vue';
import { ordertotalReq } from '@/api/order.api'
import dayjs from 'dayjs';
import Panel from '@/panel/Panel.vue';
export default {
  components: { LineChart, Panel },
  data() {
    return {
      orderTime: [],
      orderPrice: [{
        name: '订单量', data: []
      }],
      date: ''
    }
  },
  methods: {
    // 查询时间
    search() {
      console.log(this.date);
      if (this.date) {
        this.date = JSON.stringify(this.date.map(item => dayjs(item).format('YYYY-MM-DD HH:mm:ss')))
        this.ordertotal(this.date)
      } else {
        this.$message.error('请输入时间范围')
      }
    },
    ordertotal() {
      ordertotalReq(this.date).then(res => {
        console.log(res);
        this.orderTime = res.data.data.map(item => dayjs(item.orderTime).format('YYYY-MM-DD HH:mm:ss'))
        this.orderPrice[0].data = res.data.data.map(item => item.orderAmount)
      })
    }
  },
  created() {
    this.ordertotal()
  }
};
</script>

<style lang="less" scoped>
.charts {
  height: 500px;
}

button {
  margin-left: 15px;
}
</style>